﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-1.11.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .top {
            width: 1500px;
            margin: 0 auto;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
        }

        #Q-nav {
            width: 1500px;
            margin: 0 auto;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <!--第一张图片-->
    <div class="top" id="top">
        <img src="images/top.png" alt="" />
    </div>
    <!--第二张图片-->
    <div id="Q-nav">
        <img src="images/nav.png" alt="" />
    </div>
    <!--第三张图片-->
    <div class="main" id="main">
        <img src="images/main.png" alt="" />
    </div>
    <script>
      $(function(){
        $(window).load(function () {
            $(window).scroll(function () {
                if($(window).scrollTop() > $("#top").height()){
                    var json = {position: 'fixed',top: 0,left: "50%","margin-left": -$("#Q-nav").width()/2};
                    $("#Q-nav").css(json);
                    $("#main").css("padding-top",$("#Q-nav").height());
                }else{
                    var json = {position: 'static',left: 0,"margin-left": 0,"margin": "0 auto"};
                    $("#Q-nav").css(json);
                    $("#main").css("padding-top",0);
                }
            });
        });
      })
    </script>

</body>

</html>